<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>套题管理</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/plugins/bootstrap-table/bootstrap-table.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/animate.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/admin.css">

    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${pageContext.request.contextPath}/static/js/content.min.js?v=1.0.0"></script>
    <script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/bootstrap-table.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/bootstrap-table-mobile.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

</head>
<style>
    .admin-so {
        height: 30px;
        line-height: 40px;
        margin-bottom: 10px;
    }
</style>

<body class="gray-bg">


<div class="wrapper wrapper-content animated fadeInRight">
    <div class="container-fluid">
        <div class="row">
            <%--第一级选项卡--%>
            <div class="col-sm-12">
                <div class="tabs-container">
                    <input type="hidden" id="exId" value="">
                    <ul class="nav nav-tabs" id="pan"></ul>
                    <div class="tab-content" id="cont"></div>
                </div>
            </div>
        </div>
    </div>

</div>

</body>
</html>

<script>
    //通过某个对象属性值对数组排序
    function compare(property) {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            return value1 - value2;
        }
    }

    //生成选项卡 表格
    $.ajax({
        url: '/levelAndSecond',
        type: 'get',
        dataType: 'json',
        success: function (json) {
            var arr = [];
            $.each(json.uservos, function (i, v) {
                //车型 c1c2c3c4
                if (i === 0) {
                    $("#pan").append("<li class='active'><a data-toggle='tab' href='#tab-" + i + "' aria-expanded='true'>" + v.title + "</a></li>");
                } else {
                    $("#pan").append("<li><a data-toggle=\"tab\" href=\"#tab-" + i + "\" >" + v.title + "</a></li>");
                }
                if (i === 0) {
                    $("#cont").append("<div id=\"tab-" + i + "\" class='tab-pane active'><div class='panel-body'><div class=\"col-sm-12\"><div class=\"tabs-container\"><ul class=\"nav nav-tabs\" id='pan-" + i + "'></ul><div class='tab-content' id='pan-ten-" + i + "'></div></div></div></div></div>");
                } else {
                    $("#cont").append("<div id='tab-" + i + "' class=\"tab-pane\"><div class='panel-body'><div class=\"col-sm-12\"><div class=\"tabs-container\"><ul class=\"nav nav-tabs\" id='pan-" + i + "'></ul><div class='tab-content' id='pan-ten-" + i + "'></div></div></div></div></div>");
                }

                $.each(json.uservos[i].courseVoEnhances, function (j, v) {
                    //科目一 科目四
                    if (j === 0) {
                        $("#pan-" + i + "").append("<li class='active'><a data-toggle='tab' href='#tab-" + i + "-" + j + "'  aria-expanded='true' >" + v.name + "</a></li>");
                    } else {
                        $("#pan-" + i + "").append("<li><a data-toggle='tab' href='#tab-" + i + "-" + j + "' >" + v.name + "</a></li>");
                    }
                    //内容
                    if (j === 0) {
                        $("#pan-ten-" + i + "").append("<div id='tab-" + i + "-" + j + "' class='tab-pane active'><div class='panel-body' id='pan" + i + "-body" + j + "'></div></div>");
                    } else {
                        $("#pan-ten-" + i + "").append("<div id='tab-" + i + "-" + j + "' class='tab-pane'><div class='panel-body' id='pan" + i + "-body" + j + "'></div></div>");
                    }
                    $("#pan" + i + "-body" + j + "").append("<div class='col-sm-12'><div class='tabs-container'><ul class='nav nav-tabs' id='pan-" + i + "-" + j + "'></ul><div class='tab-content' id='pan-con-" + i + "-" + j + "'></div></div></div>");

                    //题型排序
                    $.each(json.uservos[i].courseVoEnhances[j].exertypeVos, function (k, v) {
                        arr.push({index: v.px, tixin: v})
                    });
                    arr = arr.sort(compare('index'));
                    $.each(json.uservos[i].courseVoEnhances[j].exertypeVos, function (k, v) {
                        //科目  面板内容载体
                        var $pantt = $("#pan-" + i + "-" + j + "");

                        if (k === 0) {

                            $pantt.append("<li class='active'><a data-toggle='tab' id='" + v.id + "' href='#tab-" + i + "-" + j + "-" + k + "' onclick='exid(" + v.id + ")'  aria-expanded='true'>" + arr[k].tixin.name + "</a></li>");
                            $("#pan-con-" + i + "-" + j + "").append("<div id='tab-" + i + "-" + j + "-" + k + "' class='tab-pane active'><div class='panel-body'></div></div>");
                        } else {
                            $pantt.append("<li><a data-toggle='tab' href='#tab-" + i + "-" + j + "-" + k + "' onclick='exid(" + v.id + ")' >" + arr[k].tixin.name + "</a></li>");
                            $("#pan-con-" + i + "-" + j + "").append("<div id='tab-" + i + "-" + j + "-" + k + "' class='tab-pane'><div class='panel-body'></div></div>")
                        }

                        //生成表格
                        $("#tab-" + i + "-" + j + "-" + k + " > .panel-body").append("<table data-mobile-responsive='true' id='table-" + i + "-" + j + "-" + k + "' exid='" + v.id + "'></table>");
                        //产生表格内容
                        var $iddd = $("#table-" + i + "-" + j + "-" + k + "");
                        $iddd.bootstrapTable({
                            striped: true,
                            data: arr[k].tixin.secondTypes,
                            height: 600,
                            sidePagination: "client",
                            pagination: true,
                            pageNumber: 1,
                            pageSize: 10,
                            pageList: [],
                            clickToSelect: true,
                            sortName: 'px',
                            sortOrder: 'asc',
                            uniqueId: "id",
                            columns: [
                                {
                                    checkbox: true
                                }, {
                                    field: 'name',
                                    title: '套题名称'
                                }, {
                                    field: 'px',
                                    title: '排序'
                                }, {
                                    field: 'imgpath',
                                    title: '图标',
                                    formatter: function (value, row, index) {
                                        return '<img src=' + value + ' width="40">';
                                    }
                                }, {
                                    field: 'operation',
                                    clickToSelect: false,
                                    title: '操作',
                                    formatter: function (value, row, index) {
                                        return '<a class="btn btn-xs btn-primary" href="javascript:void(0)" onclick="ViewSecondType(' + i + ',' + j + ',' + k + ',' + row.id +')" >查看</a>' +
                                            '<a class="btn btn-xs btn-success " style="margin: 0 5px" href="javascript:void(0);" onclick="EditSecondType(' + i + ',' + j + ',' + k + ',' + row.id + ')">编辑</a>' +
                                            '<a class="btn btn-xs btn-danger" href="javascript:void(0);" onclick="DelSecondType(' + i + ',' + j + ',' + k + ',' + row.id + ')">删除</a>';
                                    }
                                }, {
                                    field: 'id',
                                    title: 'id',
                                    clickToSelect: false,
                                    visible: false
                                }
                            ]
                        });
                    });
                    arr = [];
                });
            });
            var $pa = $("#pan");
            var iid = $("a[href='#tab-0-0-0']").attr("id");
            $pa.append("<div class='btn-group col-md-offset-4' ></div>");
            $pa.find(".btn-group").append("<button class='btn btn-primary' style='margin-right:50px ' onclick='javascript:location.reload()' >刷新</button>");
            $pa.find(".btn-group").append("<button class='btn btn-primary' onclick='AddSecondType()'>新增套题</button>");
            $pa.find(".btn-group").append("<button class='btn btn-success' style='margin: 0 5px' onclick='CopySecondType()'>复制套题</button>");
            $pa.find(".btn-group").append("<button class='btn btn-danger' onclick='DelTaoti()' >删除套题</button>");
            exid(iid);
        }
    });

    //存储exid
    function exid(id) {
        $("#exId").val(id)
    }

    //查看
    function ViewSecondType(i,j,k,id) {
        var values = $("#table-" + i + "-" + j + "-" + k + "").bootstrapTable('getRowByUniqueId', id);
        var lay = layer.open({
            type: 2,
            title: '查看套题',
            area: ['100%', '100%'],
            content: "/page/secondtype/secondtype_view.jsp",
            maxmin: true,
            success: function (layero, index) {
                var body = layer.getChildFrame('body', index);
                body.find("#taotiid").val(id);
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.biaoge();
                layer.title('查看套题--'+values.name, lay)
            }
        });
    }


    //新增套题信息
    function AddSecondType() {
        var eid = $("#exId").val();
        layer.open({
            type: 2,
            title: '新增套题',
            area: ['800px', '350px'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/secondtype/secondtype_add.jsp",
            success: function (layero, index) {
                var body = layer.getChildFrame('body', index);
                body.find("input[name='exid']").val(eid);
            }
        });
    }


    //复制套题信息
    function CopySecondType() {
        var exids = [];
        var $table = $("table[id]");
        $.each($table, function (k, v) {
            var idd = '#' + v.id;
            var ar = $(idd).bootstrapTable('getSelections');
            if (ar.length) {
                $.each(ar, function (k, v) {
                    exids.push(v.id)
                })
            }
        });
        if (exids.length === 0) {
            layer.msg('请选择数据')
        } else {
            layer.open({
                type: 2,
                title: '复制套题',
                area: ['1000px', '750px'],
                fixed: false, //不固定
                maxmin: true,
                content: "/page/secondtype/secondtype_copy.jsp",
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    body.find("#taoti").val(exids);
                }
            });
        }
    }

    //编辑套题信息
    function EditSecondType(i, j, k, id) {
        var values = $("#table-" + i + "-" + j + "-" + k + "").bootstrapTable('getRowByUniqueId', id);
        layer.open({
            type: 2,
            title: '编辑套题',
            area: ['800px', '350px'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/secondtype/secondtype_edit.jsp",
            success: function (layero, index) {
                var body = layer.getChildFrame('body', index);
                body.find("input[name='name']").val(values.name);
                body.find("input[name='zname']").val(values.zname);
                body.find("input[name='px']").val(values.px);
                body.find("a[title='查看大图']").attr("href", values.imgpath);
                body.find("img[id='img']").attr("src", values.imgpath);
                body.find("input[name='id']").val(values.id);
            }
        });
    }

    //单个删除
    function DelSecondType(i, j, k, id) {
        var values = $("#table-" + i + "-" + j + "-" + k + "").bootstrapTable('getRowByUniqueId', id);
        layer.confirm('确定是否删除套题 ' + values.name + '', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.ajax({
                type: 'delete',
                url: "/secondType?id=" + id,
                success: function (json) {
                    if (json.status === "success") {
                        layer.msg('操作成功', {icon: 1, time: 1000});
                        $("#table-" + i + "-" + j + "-" + k + "").bootstrapTable('removeByUniqueId', id);
                    } else {
                        layer.msg(json.msg, {icon: 2, time: 1000});
                    }
                },
                error: function () {
                    layer.msg('网络连接失败', {icon: 5, time: 1000});
                }
            });
        }, function () {
            layer.msg('取消操作成功', {icon: 1, time: 1000});
        });
    }


    //批量删除
    function DelTaoti() {
        var ex = $("#exId").val();
        var $table = $(".panel-body").find("table[exid='" + ex + "']");
        var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id;
        });
        if (ids.length === 0) {
            layer.msg('请选择数据')
        } else {
            layer.confirm('确定是否删除套题', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    contentType: 'application/json;charset=UTF-8',
                    type: 'delete',
                    url: "/secondTypes",
                    data: JSON.stringify(ids),
                    success: function (json) {
                        if (json.status === "success") {
                            layer.msg('操作成功', {icon: 1, time: 1000});
                            $table.bootstrapTable('remove', {
                                field: 'id',
                                values: ids
                            });
                        } else {
                            layer.msg(json.status, {icon: 2, time: 1000});
                        }
                    },
                    error: function () {
                        layer.msg('服务器繁忙，请刷新页面后重试', {icon: 5, time: 1000});
                    }
                });
            }, function () {
                layer.msg('取消操作成功', {icon: 1, time: 1000});
            });
        }
    }


</script>